---
layout: none
---
{%

assign version = site.data.info.version %}{%

capture download_url
  %}https://github.com/rsms/raster/releases/download/v{{ version }}/raster-{{ version }}.zip{%
endcapture %}{%

for file in site.static_files %}{%
  assign _path = file.path | remove_first: "/raster" %}{%
  if _path == "/examples/scale.css" %}{%
    assign scale_css_v = file.modified_time | date: "%Y%m%d%H%M%S" %}{%
  endif %}{%
endfor

%}
<html>
<head>
  <meta charset="utf-8">
  <title>Raster examples</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="stylesheet" href="../raster2.css?v={{version}}">
  <link rel="stylesheet" href="scale.css?v={{scale_css_v}}">
  <style>

:root {
  --columnGap: 4rem;
  --rowGap: calc(var(--lineHeight) * 4);
}

.examples {
  margin-top: calc(var(--lineHeight) * 2);
}
.examples > r-cell {
  border-top: 2px solid var(--green);
  margin-top: calc(var(--lineHeight) - 2px);
}

  </style>
</head>
<body>
  <h1>Raster examples</h1>
  <r-grid columns=4 columns-s=2 class="examples">

    <r-cell><h4><a href="raster.html">Feature overview</a></h4><p>
      Comprehensive overview of various Raster features,
      including a layout debug mode and grid visualizer.
    </p></r-cell>

    <r-cell><h4><a href="columns.html">Columns</a></h4><p>
      Simple examples of various column widths and cell spans.
    </p></r-cell>

    <r-cell><h4><a href="poster.html">Posters</a></h4><p>
      Scalable posters
    </p></r-cell>

  </r-grid>
  <br>
  <br>
  <p>
    <a href="https://rsms.me/raster/">&larr; Back to Raster home page</a>
  </p>
{% include analytics.html %}
</body>
</html>
